<template>
	<view class="index">
		<view class="ipt">
			<input type="text" />
		</view>
		<view class="container">
			<view class="banner">
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
					indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#fff" :circular="true">
					<swiper-item v-for="item in bannerList" :key="item.bannerid">
						<image :src="item.img" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="goods">
				<view class="title">
					<view class="font">
						<h1>促销精品</h1>
						<h2>诚意推荐品质商品</h2>
					</view>
					<view class="more">
						<text>&gt;</text>
					</view>
				</view>
				<view class="good-list">
					<view class="item" v-for="item in goodList" :key="item.proid">
						<view class="good-info">
							<view class="image">
								<image :src="item.img1" mode="aspectFill"></image>
							</view>
							<view class="info">
								<view class="good-title">{{item.proname}}</view>
								<view class="good-price">
									<view class="new-price">{{(item.originprice*(item.discount/10)).toFixed(2)}}</view>
									<view class="old-price">{{item.originprice}}</view>
								</view>
							</view>
						</view>
						<view class="good-btn">
							<navigator :url="`/pages/goodPage/goodPage?id=${item.proid}`">
								<button>抢购</button>
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import Http from "../../utils/request.js"

	let bannerList = ref([]);
	let goodList = ref([]);

	async function getBanner() {
		let result = await Http.get("/api/banner/list");
		bannerList.value = result.data
	}
	getBanner();

	async function getGoods() {
		let result = await Http.get("/api/pro/list")
		console.log(result.data);
		goodList.value = result.data;
	}
	getGoods()
</script>

<style scoped>
	.ipt {
		background-color: #92CF38;
		padding-bottom: 180rpx;
	}

	.container {
		padding: 0 55rpx;
		margin-top: -120rpx;
	}

	.banner swiper {
		border-radius: 16rpx;
		overflow: hidden;
		height: 240rpx;
	}

	.banner swiper swiper-item image {
		width: 100%;
		height: 100%;
	}

	.goods {
		padding: 40rpx 0;
	}

	.goods .good-list .item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
	}

	.goods .good-list .item .good-info {
		display: flex;
		padding: 20rpx 0;
	}

	.goods .good-list .item .good-info .image {
		border-radius: 6rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.goods .good-list .item .good-info .image image {
		width: 140rpx;
		height: 140rpx;
	}

	.goods .good-list .item .good-info .info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods .good-list .item .good-info .good-title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		width: 306rpx;
		font-size: 26rpx;
	}

	.goods .good-list .item .good-info .info .good-price {
		display: flex;
		align-items: center;
	}

	.goods .good-list .item .good-info .info .good-price .new-price {
		color: #ff3a3a;
		font-size: 30rpx;
		margin-right: 10rpx;
	}

	.goods .good-list .item .good-info .info .good-price .old-price {
		text-decoration: line-through;
		color: #bcc1ca;
		font-size: 24rpx;
	}

	.goods .good-list .item .good-btn button {
		width: 110rpx;
		height: 50rpx;
		background-color: #F83E3D;
		border-radius: 100rpx;
		color: #fff;
		font-size: 26rpx;
		position: static;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	uni-button:after {
		display: none;
	}
</style>